﻿
.fiveStarRegion {
    font-size: 10px;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

    .fiveStarRegion svg path,
    .fiveStarRegion svg {
        fill: currentColor;
    }

    .fiveStarRegion .TouchRegion {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
    }

    .fiveStarRegion .contentStarRegion.ShowValue,
    .fiveStarRegion .contentStarRegion.Background,
    .fiveStarRegion .TouchRegion {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
    }

    .fiveStarRegion .TouchRegion {
        z-index: 3;
    }

    .fiveStarRegion .contentStarRegion.ShowValue {
        z-index: 2;
        color: red;
    }

    .fiveStarRegion .contentStarRegion.Background {
        z-index: 1;
        position: relative;
    }
        .fiveStarRegion .contentStarRegion.Background,
        .fiveStarRegion .contentStarRegion.Background .icon {
            color: #c8c4c4 !important;
        }

    .fiveStarRegion .contentStarRegion .item {
        display: inline-block;
        overflow: hidden;
        position: relative;
        z-index: 1;
        width: 5em;
        height: 5em;
        float: left;
    }

        .fiveStarRegion .contentStarRegion .item .icon {
            display: block;
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 100%;
        }
